<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .box {
            width: 500px;
            height: 300px;
            border: solid 2px #ccc;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .img_box {
            width: 4000px;
            position: absolute;
            left: -500px;
        }

        .img_box li {
            width: 500px;
            height: 300px;
            float: left;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            color: #fff
        }

        .btn_list {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .btn_list li {
            float: left;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #ccc;
            text-align: center;
            line-height: 25px;
            color: #fff;
            margin-right: 5px;
            user-select: none;
            cursor: pointer;
        }

        .btn_list .active {
            background: rgb(243, 208, 144);
        }
        .btn{
            width: 100%;
            height: 80px;
            position: absolute;
            top: 50%;
            transform: translateY(-20px)
        }
        .btnRight,.btnLeft{
            font-size: 25px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            text-align: center;
            line-height: 40px;
            user-select: none;
            cursor: pointer;
        }
        .btnRight{
            float: right;
            border-radius: 20px 0 0 20px;
        }
        .btnLeft{
            float: left;
            border-radius: 0 20px 20px 0;
        }
    </style>

<body>
    <div class="box">
        <ul class="img_box">
            <li style="background: pink">1</li>
            <li style="background: rgb(198, 241, 198)">2</li>
            <li style="background: rgb(247, 247, 127)">3</li>
            <li style="background: skyblue">4</li>
            <li style="background: rgb(248, 170, 248)">5</li>
            <li style="background: rgb(248, 156, 156)">6</li>
        </ul>
        <ol class="btn_list">
            
        </ol>
        <div class="btn">
            <div class="btnRight">&gt;</div>
            <div class="btnLeft">&lt;</div>
        </div>
    </div>
</body>
<script src="../js/utils.js"></script>
<script>
    let box = document.querySelector(".box")
    let img_box = document.querySelector(".img_box")
    let btn_list = document.querySelector(".btn_list")
    let img_li = document.querySelectorAll(".img_box li")
    let btn = document.querySelector(".btn")


    //【1】渲染小圆圈按钮（注意：渲染小圆圈按钮要在img_li的个数变化之前渲染）
    renderBtn(btn_list, img_li)
    let con = btn_list.querySelectorAll("li");
    

    //由于克隆了第一张照片，要重新获取img_li的长度（克隆第一张放在最后一张），再调用函数自动播放，播放到克隆的那张就瞬间跳到原始的第一张
    let cloneFirst = img_box.firstElementChild.cloneNode(true)
    let cloneLast = img_box.lastElementChild.cloneNode(true)
    img_box.insertBefore(cloneLast,img_box.firstElementChild)
    img_box.appendChild(cloneFirst)
    img_li = document.querySelectorAll(".img_box li")
 
    //【2】让img_box动起来  
    let index = 1;
    let timer;
    autoPlay()

    //【3】鼠标进入停止切换
    box.onmouseover = function () {
        clearInterval(timer)
    }
    //【4】鼠标离开继续切换轮播图
    box.onmouseout = function () {
        autoPlay()
    }
    //【5】点击左右按钮改变轮播图
    let flag=true;          //定义一个开关变量来确定上一次的点击运动函数是否结束
    btn.onclick = function(e){
        if(flag){
            flag = false;    //点击按钮后，马上把开关变量关了，运动函数结束之前再次点击不会执行下面的代码
            if(e.target.className === "btnRight"){
                index++;
                move(img_box, { left: index * (-500) }, moveEnd)    
            }
            if(e.target.className === "btnLeft"){
                index--;
                move(img_box, { left: index * (-500) }, moveEnd)                
            }
        }
    }
    // 【6】点击小圆圈按钮跳到相应的图
    btn_list.onclick = function(e){
        index = e.target.innerHTML - 0;
        move(img_box,{left:e.target.innerHTML*(-500)},moveEnd)
        

    }

    //渲染小圆点
    function renderBtn(ele, arr) {
        arr.forEach(function (val, idx) {
            if (idx === 0) {
                ele.innerHTML = `<li class="active">${idx + 1}</li>`
            } else {
                ele.innerHTML += `<li>${idx + 1}</li>`
            }
        })
    }

    //自动切换图片
    function autoPlay() {
        timer = setInterval(function () {
            index++;
            move(img_box, { left: index * (-500) }, moveEnd)
        }, 1300)
    }

    // 运动结束该执行的
    function moveEnd(){
        //当运动到最后一张(克隆的那张1)时，索引强制变成1，同时瞬间移动到原始1的位置
        if (index === img_li.length - 1) {
                    index = 1;
                    img_box.style.left = "-500px";
                }
                // 当索引为0（克隆的6那张），强制把索引变成6,同时瞬间移动到原始6的位置
                if(index === 0){
                    index = img_li.length - 2
                    img_box.style.left = -index * 500 +'px'
                }
                // 渲染小圆圈，排他思想
                for(let i = 0; i < con.length; i++){
                    con[i].className = ''
                }
                // index是从1开始的，第一个小圆圈的索引是从0开始的，所以index要减去1
                con[index - 1].className = 'active';
                // 这是一个用在左右按钮的开关变量，执行完move运动函数，打开开关，可以执行下一个move运动函数
                flag = true;

    }


</script>

</html>